<template>
  <div class="nav">
    <router-link to="/home" class="item" active-class="active">
      <i class="iconfont">&#xe660;</i>首页</router-link>

    <router-link to="/cart" class="item" active-class="active">
      <i class="iconfont">&#xe620;</i>购物车</router-link
    >

    <router-link to="/orders" class="item" active-class="active">
      <i class="iconfont">&#xe8ae;</i>订单</router-link
    >

    <router-link to="/mine" class="item" active-class="active">
      <i class="iconfont">&#xe797;</i>我的</router-link
    >
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
@font-face {
  font-family: "iconfont";
  src: url("../assets/icons/iconfont.woff2?t=1722835924500") format("woff2"),
    url("../assets/icons/iconfont.woff?t=1722835924500") format("woff"),
    url("../assets/icons/iconfont.ttf?t=1722835924500") format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 18px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.nav {
    max-width: 1024px;
  display: flex;
  justify-content: space-evenly;
  font-size: 10px;
  > .item {
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: center;
    width: 25%;
    color: #333333;
  }
  > .item.active {
    color: #7543E0;
  }
}
</style>
